<template>
  <div class="body">
    <Header @getSchemeId="getSchemeId"></Header>
    <audio></audio>
    <div class="BreadcrumbSortBox">
      <!-- 面包屑 -->
      <div class="flex center">
        <!-- <a-breadcrumb>
          <a-breadcrumb-item>一级分类</a-breadcrumb-item>
          <a-breadcrumb-item>二级分类</a-breadcrumb-item>
          <a-breadcrumb-item></a-breadcrumb-item>
        </a-breadcrumb>-->
      </div>
    </div>
    <div>
      <div class="w flex product-intro clearfix">
        <!-- <ProductPreview></ProductPreview> -->

        <JdProductPreview :imageArr="imageArr"></JdProductPreview>
        <div class="itemInfo-wrap">
          <div class="sku-name">{{ schemeInfo.SubAppsSolutions }}</div>
          <div class="summary-price-wrap">
            <div class="summary-price J-summary-price">
              <div class="dt">Price</div>
              <div class="dd">
                <span class="p-price">
                  <!-- <span>$</span> -->
                  <span class="price J-p-69130990642">{{ schemeInfo.CostofInvestment }}</span>
                </span>
              </div>
            </div>
            <!-- 
            <div class="summary-info J-summary-info clearfix">
              <div class="comment-count item fl">
                <p class="comment">Customer Reviews</p>
                <a class="count J-comm-67464971466">30+</a>
              </div>
            </div>-->
          </div>
          <div class="li p-choose">
            <div class="dt"><span>JabilCome</span></div>
            <div class="dd">
              <img src="../../assets/img/List/coin.png" alt class="coinImg" />
              <span class="jpb">{{ schemeInfo.JPB }}</span>
            </div>
          </div>
          <div class="li p-choose">
            <div class="dt">Benefit</div>
            <div class="dd">{{ schemeInfo.BenefitComments }}</div>
          </div>
          <div class="li p-choose">
            <div class="dt">Department</div>
            <div class="dd">{{ schemeInfo.DeptName }}</div>
          </div>
          <div class="li p-choose">
            <div class="dt">Due Date</div>
            <div class="dd">{{ schemeInfo.DueDate }}</div>
          </div>
          <div class="li p-choose">
            <div class="dt">Project Leader</div>
            <div class="dd">{{ schemeInfo.ProjectLeader }}</div>
          </div>

          <div class="li p-choose">
            <a-icon
              type="like"
              theme="outlined"
              style="font-size: 36px;color: rgb(255, 106, 0);margin-left: 9px;cursor: pointer;"
              @click="giveLike"
              v-if="schemeInfo.IsPraise"
            />
            <a-icon type="like" theme="outlined" style="font-size: 36px;margin-left: 9px;cursor: pointer;" @click="giveLike" v-else />

            <div class="dd jpb">{{ schemeInfo.PraiseTimes }}</div>
          </div>
          <div class="btn-lg" @click="CreatePDF">Export</div>
        </div>
        <div id="track" class="track">
          <div class="extra">
            <div class="track-tit">
              <!-- <h3>看了又看</h3> -->
              <h3>Looked and looked</h3>
              <span></span>
            </div>
            <div class="track-con">
              <ul
                class="trackUl"
                v-if="schemeInfo.shpSchemeRecommend && schemeInfo.shpSchemeRecommend.length > 0"
                :style="{ top: trackULTop + 'px', height: schemeInfo.shpSchemeRecommend.length * 188 + 'px' }"
              >
                <li v-for="(item, index) in schemeInfo.shpSchemeRecommend" :key="index" @click="toSchemePage(item)">
                  <a>
                    <img height="150" width="150" :src="item.SchemeImage[0]" @error="errorImg" />
                    <div>{{ item.SubAppsSolutions }}</div>
                    <p class="J-p-100011535072">{{ item.CostofInvestment }}</p>
                  </a>
                </li>
              </ul>
            </div>
            <div class="track-more">
              <a class="J-prev sprite-up" @click="upTit">上翻</a>
              <a class="J-next sprite-down" @click="downTit">下翻</a>
            </div>
          </div>
        </div>
      </div>
      <!-- 推荐模块 -->
      <div class="w">
        <div id="shopRecSuit" class="ETab">
          <div class="tab-main large">
            <ul>
              <li class="J-shopRec-trigger shopRec-trigger current">SME Recommend</li>
            </ul>
          </div>
          <div class="tab-con clearfix">
            <div class="J-shopRec-content shopRec-content">
              <ul class="plist plist-2" id="shop-reco">
                <li class="fore1" v-for="(item, index) in schemeInfo.shpSchemeSME" :key="index" @click="toSchemePage(item)">
                  <div class="p-img">
                    <img width="160" height="160" v-if="item.SchemeImage[index]" :src="item.SchemeImage[index]" @error="errorImg" />
                    <img width="160" height="160" v-else src="@/assets/img/noImg.png" />
                  </div>
                  <div class="p-name">
                    <a>{{ item.SubAppsSolutions }}</a>
                  </div>
                  <div class="p-price">
                    <strong class="J-p-100007384530">{{ item.CostofInvestment }}</strong>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>

        <!-- tab 规格及评价 -->
        <div class="Detail">
          <div class="tab-main large" :class="fixTop ? 'Topfixed' : ''">
            <ul>
              <li v-for="(item, index) in tabList" :key="index" :class="index == activeIndex ? 'current' : ''" @click="tabClick(index)">{{ item }}</li>
              <li class="current a0" @click="CreatePDF">Export</li>
            </ul>
          </div>

          <div v-show="activeIndex === 0">
            <div class="p-parameter">
              <p class="p50" v-text="schemeInfo.Description" style="font-size: 18px;"></p>
              <div style="width:100%;">
                <span v-for="(v, j) in schemeInfoDetailList" :key="j" class="parameterLine">

                  <span
                    class="dt"
                    v-if="
                      v &&
                        Object.values(schemeInfo)[j] &&
                        v !== 'shpSchemeRecommend' &&
                        v !== 'shpSchemeSME' &&
                        v !== 'SchemeImage' &&
                        v !== 'Video' &&
                        v !== 'Description' &&
                        v !== 'shpSchemeKind' &&
                        v !== 'Details' &&
                        v !== 'SchemeId' &&
                        v !== 'BrowseTimes' &&
                        v !== 'PraiseTimes' &&
                        v !== 'IsPraise' &&
                        v !== 'IsSME' &&
                        v !== 'DeptId'
                    "
                  >
                    {{ v }}:{{ Object.values(schemeInfo)[j] }}
                  </span>
                </span>
              </div>
              <p class="more-par">
                <a class="J-more-param" @click="() => (activeIndex = 1)">
                  More Parameters
                  <span class="txt-arr">>></span>
                </a>
              </p>
            </div>
            <div><VideoPlayer v-if="schemeInfo.Video" :src="schemeInfo.Video" style="width:80%;height:588px;margin-left:10%;"></VideoPlayer></div>

            <div class="content p50" style="width:80%;margin-left:10%;" v-html="schemeInfo.Details"></div>
            <!-- 视频 -->

            <!-- 图片列表 -->
          </div>
          <!-- 规格参数 -->
          <div v-if="activeIndex === 1">
            <div class="container" v-if="schemeInfo.shpSchemeKind && schemeInfo.shpSchemeKind.length > 0">
              <div class="section">
                <div class="section-content">
                  <!--  list 修改区域 -->
                  <div v-for="(table, i) in schemeInfo.shpSchemeKind" :key="i">
                    <label class="section-title">{{ table.KindName }}</label>
                    <!-- <a-list bordered :data-source="table.shpSchemeDetailed" class="DList"> -->

                    <div bordered class="DList">
                      <div slot="header">
                        <div class="header">
                          <a-checkbox @change="checkAll(table, i)" :checked="table.check" class="checkBox"></a-checkbox>
                          <span>ProductName</span>
                          <span>ProductParameter</span>
                          <span>Quantity</span>
                          <span>Unit</span>
                          <span>Imgs</span>
                          <span>Price</span>
                        </div>
                      </div>
                      <a-list-item slot="renderItem" v-for="(item, index) in table.shpSchemeDetailed" :key="index">
                        <div class="line">
                          <a-checkbox @change="checkLine(item, i, index)" class="checkBox" :checked="item.check"></a-checkbox>
                          <span>{{ item.ProductName }}</span>
                          <span>{{ item.ProductParameter }}</span>
                          <span><a-input-number v-model="item.Quantity" :min="0" :max="10000" @change="onChangeQuantity(item, i)" /></span>
                          <span>{{ item.UnitName }}</span>
                          <span>
                            <viewer style="width: 150px;height: 150px; overflow: hidden;">
                              <img v-if="item.Images" :src="item.Images" style="width:150px;height:150px;" @error="errorImg" />
                              <img style="width:150px;height:150px;" v-else src="@/assets/img/noImg.png" />
                            </viewer>
                          </span>
                          <span>{{ item.Price }}</span>
                        </div>
                      </a-list-item>
                    </div>
                    <!-- 小计区域 -->
                    <div class="totalPrice sub_total">
                      <div class="price-item">
                        <div class="price-name">
                          <span>subTotal：</span>
                          <span class="price-trade">
                            <span class="ng-star-inserted">
                              <span class="price-cny-symbol">$</span>
                              <span class="price-money">{{ sub_totalList[Number(i)] }}</span>
                              <span class="price-cny-unit"></span>
                              <span class="price-count-unit"></span>
                            </span>
                          </span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="totalPrice sub_total">
                <div class="price-item">
                  <div class="price-name">
                    <span>Total：</span>
                    <span class="price-trade">
                      <span class="ng-star-inserted">
                        <span class="price-cny-symbol">$</span>
                        <span class="price-money">{{ totalAmount }}</span>
                        <span class="price-cny-unit"></span>
                        <span class="price-count-unit"></span>
                      </span>
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 商品评价 -->
          <div v-if="activeIndex === 2">
            <div class="mt">
              <h3>Scheme Evaluation</h3>
              <div class="AddComment" @click="openAddCommentsModal">Add comments</div>
            </div>
            <div class="tab-main small shopdt1">
              <ul class="filter-list" v-if="userReviewsInfo">
                <li :class="reviewsIndex === 0 ? 'current' : ''" @click="changeReviews(0)">
                  <a>
                    All
                    <span>({{ userReviewsInfo.AllEvaluation ? userReviewsInfo.AllEvaluation : 0 }}+)</span>
                  </a>
                </li>
                <li :class="reviewsIndex === 1 ? 'current' : ''" @click="changeReviews(1)">
                  <a>
                    Pictured
                    <span>({{ userReviewsInfo.Pictured }}+)</span>
                  </a>
                </li>
                <li :class="reviewsIndex === 2 ? 'current' : ''" @click="changeReviews(2)">
                  <a>
                    Video
                    <span>({{ userReviewsInfo.Video }}+)</span>
                  </a>
                </li>
                <!-- <li class="ar">
                  <a-dropdown>
                    <a class="ant-dropdown-link" @click="e => e.preventDefault()">
                      Recommend Sorting
                      <a-icon type="down" />
                    </a>
                    <a-menu slot="overlay" @click="RecommendSorting">
                      <a-menu-item key="1">Recommend sorting</a-menu-item>
                      <a-menu-item key="2">Time Sorting</a-menu-item>
                    </a-menu>
                  </a-dropdown>
                </li>-->
              </ul>
            </div>
            <!-- 评价内容列表 -->

            <div class="tab-con" v-if="userReviewsInfo.shpSchemeReplyInfo && userReviewsInfo.shpSchemeReplyInfo.length > 0">
              <div v-for="(item, index) in userReviewsInfo.shpSchemeReplyInfo" :key="index" class="comment-item">
                <div class="user-column">
                  <div class="user-info">
                    <!-- <img src="width=&quot;25&quot;" height="25" class="avatar" @error="errorImg" /> -->
                    <a-avatar shape="square" icon="user" />
                    {{ item.UserName }}
                  </div>
                  <div class="user-level"><a class="comment-plus-icon" target="_blank"></a></div>
                </div>
                <div class="comment-column J-comment-column">
                  <a-rate :default-value="item.Satisfaction" disabled class="star" />

                  <p class="comment-con">{{ item.Comments }}</p>
                  <div class="pic-list J-pic-list" v-if="item.Images.length > 0">
                    <!-- <a class="J-thumb-img current"> -->
                    <div
                      class="J-thumb-img"
                      v-for="(v, i) in item.Images"
                      :key="i"
                      @click="shopImgPreview($event, v, i, index, item.Images, item)"
                      :class="item.activeIndex === i ? 'active' : ''"
                    >
                      <img :src="v" width="48" height="48" @error="errorImg" />
                      <span class="video-icon"></span>
                    </div>
                  </div>

                  <img v-show="item.isShowImg" :src="item.selectUrl" @error="errorImg" class="fatshowImg" @click="() => (item.isShowImg = false)" />
                  <div class="J-video-view-wrap clearfix" style="display: block;"></div>
                  <div class="comment-message">
                    <div class="order-info">
                      <!-- <span>遮瑕双头美颜笔</span> -->
                      <span></span>
                      <span></span>
                      <span>{{ item.CreateTime }}</span>
                    </div>
                    <!-- <div class="comment-op">
                      <a class="J-nice">
                        <i class="sprite-praise"></i>17
                      </a>
                      <p>
                        <i class="sprite-comment"></i>
                      </p>
                    </div>-->
                  </div>
                </div>
              </div>
            </div>

            <!-- 分页 -->
            <a-pagination
              v-model="commentPage"
              show-size-changer
              show-quick-jumper
              :page-size.sync="commentPageSize"
              :total="commentCount"
              @showSizeChange="changePage"
              @change="changePage"
              class="pagination"
            />
          </div>
        </div>
      </div>
    </div>

    <!--  添加评论弹框 -->
    <a-modal v-model="modalVisiable" @ok="handleOk" :maskClosable="false" :title="ModalTitle" :destroyOnClose="true">
      <div>
        <a-form class="mc0" :label-col="labelCol" :wrapper-col="wrapperCol">
          <a-form-item label="Comments">
            <a-textarea
              placeholder
              v-model="Comments"
              allowClear
              class="textArea"
              :auto-size="{ minRows: 8, maxRows: 18 }"
              style="width:350px;"></a-textarea>
          </a-form-item>
          <a-form-item label="Satisfaction"><a-rate v-model="Satisfaction" /></a-form-item>
          <a-form-item label="Images"><imgUpload @uploadFileList="getImgFile" :imageArr="Images" :doType="doType"></imgUpload></a-form-item>
          <!-- <a-form-item label="Video">
            <videoUpload
              @uploadFileList="getVideoList"
              :videoUrl="Video"
              :limit="1"
              :doType="doType"
            ></videoUpload>
          </a-form-item>-->
        </a-form>
      </div>
    </a-modal>
    <a-modal
      v-model="pdfModalVisable"
      @ok="toCreatePdf"
      :maskClosable="false"
      :title="ModalTitle"
      @cancel="cancelCreatePdf"
      :keyboard="pdfModalVisable"
      :closable="pdfModalVisable"
    >
      <div class="exportBox">
        <a-checkbox v-model="isSummary" disabled>Summary</a-checkbox>
        <a-checkbox v-model="isParameter" disabled>Parameter</a-checkbox>
        <a-checkbox v-model="isDetail">Detail</a-checkbox>
      </div>
    </a-modal>
  </div>
</template>

<script>
import imgUpload from '@/components/upload/imgUpload'
import Header from '@/components/layout/header'
import JdProductPreview from '@/components/ProductPreview/previewTest'
import videoUpload from '@/components/upload/videoUpload'
import VideoPlayer from '@/components/video/simpleVideo'

export default {
	name: 'Scheme',
	data() {
		return {
			// tabList: ['方案介绍', '规格与参数', '方案评价'],
			tabList: ['Scheme Introduction', 'Price Parameters', 'Scheme Evaluation'],
			activeIndex: 0,
			AllEvaluation: [], //所有评价
			imageEvaluation: [], //有图评价
			videoEvaluation: [], //视频评价
			AllEvaluationNum: 0,
			imageEvaluationNum: 0,
			videoEvaluationNum: 0,
			schemeDetailInfo: [],
			imageArr: [],
			trackULTop: 0,
			tellImgList: [],
			parameterData: [],
			columns: [],
			fixTop: false,
			browsingHistory: [],
			SchemeId: '',
			schemeInfo: [],
			DetailedInformation: '',
			Summary: '',
			RecommendInfo: [],
			sub_total: 0,
			totalAmount: 0,
			QueType: '',
			userReviewsInfo: {},
			reviewsIndex: 0,
			commentPage: 1,
			commentPageSize: 10,
			commentCount: 0,
			UserInfo: {},
			selectedRows: [],
			modalVisiable: false,
			ModalTitle: '',
			labelCol: {
				xs: { span: 24 },
				sm: { span: 5 }
			},
			wrapperCol: {
				xs: { span: 20 },
				sm: { span: 12 }
			},
			Comments: '',
			Satisfaction: 0,
			Images: [],
			Video: '',
			doType: '',
			pdfModalVisable: false,
			isSummary: true,
			isParameter: true,
			isDetail: false,
			fileUrl: '',
			isTimeOut: false,
			isToDo: false, //是否请求pdf
			SelectedKindList: [],
			sub_totalList: [],
			KindIdList: [],
			schemeInfoDetailList: []
		}
	},
	components: {
		Header,
		JdProductPreview,
		imgUpload,
		videoUpload,
		VideoPlayer
	},
	created() {
		// for (let index = 0; index < 6; index++) {
		//   this.tellImgList.push({
		//     activeIndex: 0,
		//     isShowImg: false,
		//     img: ''
		//   })
		// }
		// this.geHistory()
	},
	mounted() {
		const a = JSON.parse(this.$route.query.item)
		this.SchemeId = a.SchemeId
		console.log('this.SchemeId :>> ', this.SchemeId)

		document.addEventListener('scroll', this.handleScrollx, true) //监听 scroll
		// this.mock()
		this.$nextTick(() => {
			this.getSchemeDetail()
		})
		this.getCommentList()
		this.UserInfo =
			JSON.parse(sessionStorage.getItem('userInfo')) && JSON.parse(sessionStorage.getItem('userInfo')).length > 0 ? JSON.parse(sessionStorage.getItem('userInfo'))[0] : {}
		console.log(this.UserInfo)
	},
	beforeDestroy() {
		document.removeEventListener('scroll', this.handleScrollx, true)
	},
	watch: {
		$route() {
			const a = JSON.parse(this.$route.query.item)
			this.schemeDetailInfo = a
			this.SchemeId = a.SchemeId
			this.getSchemeDetail()
		},
		sub_totalList() {
			this.totalAmount = this.sub_totalList.reduce((x, y) => {
				return Number(x) + Number(y)
			})
		}
	},
	methods: {
		makeKindIdList() {
			const that = this
			this.KindIdList = []
			if (this.schemeInfo.shpSchemeKind && this.schemeInfo.shpSchemeKind.length > 0) {
				this.schemeInfo.shpSchemeKind.map(item => {
					if (item.shpSchemeDetailed && item.shpSchemeDetailed.length > 0) {
						let obj = {}
						obj.ProductNameList = []
						item.shpSchemeDetailed.map(v => {
							if (v.check) {
								obj.KindId = v.KindId
								obj.ProductNameList.push(v.ProductName)
								obj.ProductNameList = Array.from(new Set(obj.ProductNameList))
							}
						})
						that.KindIdList.push(obj)
					}
				})
			}
		},
		reMathInfo(e, index) {
			const that = this
			let i = Number(index)
			// console.log('e', e, 'index', index)
			this.$nextTick(() => {
				that.sub_totalList[i] = 0
				if (that.schemeInfo.shpSchemeKind && that.schemeInfo.shpSchemeKind.length > 0 && that.schemeInfo.shpSchemeKind[i]) {
					that.schemeInfo.shpSchemeKind[i].sub_total = 0
					that.schemeInfo.shpSchemeKind[i].shpSchemeDetailed.map(v => {
						if (e.check) {
							that.schemeInfo.shpSchemeKind[i].sub_total += v.Price * v.Quantity
							that.sub_totalList[i] += v.Price * v.Quantity
						}
						if (v.check) {
						}
						this.$forceUpdate()
						return v
					})
					console.log('shpSchemeDetailed :>> ', that.schemeInfo.shpSchemeKind[i].shpSchemeDetailed)
				}
			})
		},
		checkLine(e, i, index) {
			const that = this
			e.check = !e.check
			this.$nextTick(() => {
				if (!e.check) {
					that.schemeInfo.shpSchemeKind[i].check = false
				}
				let isCheck = true
				this.schemeInfo.shpSchemeKind[i].shpSchemeDetailed.map(v => {
					if (!v.check) {
						isCheck = false
					}
				})
				if (isCheck) {
					this.schemeInfo.shpSchemeKind[i].check = true
				}
				that.schemeInfo.shpSchemeKind[i].sub_total = 0
				that.sub_totalList[i] = 0
				this.$forceUpdate()

				that.schemeInfo.shpSchemeKind[i].shpSchemeDetailed.map(v => {
					if (v.check) {
						that.schemeInfo.shpSchemeKind[i].sub_total += v.Price * v.Quantity
						that.sub_totalList[i] += v.Price * v.Quantity
						this.$forceUpdate()
					}
					console.log('v :>> ', v)
					return v
				})
				// console.log('isCheck :>> ', isCheck)

				console.log('e', e, 'check', e.check, 'i', i, 'index', index)
				this.makeKindIdList()
			})
		},
		checkAll(e, i) {
			const that = this
			const index = Number(i)
			console.log('e', e, 'check', e.check, 'index', index)
			this.$nextTick(() => {
				if (e.check) {
					e.check = false
				} else {
					e.check = true
				}
				// this.$forceUpdate()
				that.schemeInfo.shpSchemeKind[index].sub_total = 0
				that.sub_totalList[index] = 0
				this.$forceUpdate()
				that.schemeInfo.shpSchemeKind[index].shpSchemeDetailed.map(v => {
					if (e.check) {
						v.check = true
						that.schemeInfo.shpSchemeKind[index].sub_total += v.Price * v.Quantity
						that.sub_totalList[index] += v.Price * v.Quantity
					} else {
						v.check = false
						that.sub_totalList[index] = 0
					}

					this.$forceUpdate()

					return v
				})

				this.makeKindIdList()
			})
			console.log('schemeInfo :>> ', that.schemeInfo.shpSchemeKind[index].shpSchemeDetailed)
			// this.reMathInfo(obj)
		},
		onChange() {},
		getVideoList(e) {
			console.log('视频 :>> ', e.fileList)

			if (e.fileList.length > 0) {
				this.Video = e.fileList[0].response.data.fileName
			}
			console.log('this.Video :>> ', this.Video)
		},
		CreatePDF() {
			this.ModalTitle = 'Export'
			this.pdfModalVisable = true
			this.fileUrl = ''
			this.isTimeOut = false
			this.isToDo = false
		},
		toCreatePdf() {
			this.isToDo = true
			this.$showLoading()
			const that = this
			const a = {
				method: 'ExportToExcel',
				userId: window.userId || 1,
				sign: '1',
				currentPage: 0,
				limit: 0,
				language: window.language || 1,
				datas: {
					SchemeId: this.SchemeId,
					IsShowDetails: this.isDetail ? 1 : 0, //
					KindIdList: this.KindIdList ? this.KindIdList : []
				}
			}
			this.$post(a)
				.then(result => {
					console.log('result :>> ', result)
					this.fileUrl = result.data.pdf
					if (result.data.pdf) {
						this.$message.success('The PDF was generated successfully and will be downloaded to your browser later!')
						this.pdfModalVisable = false
						this.$hideLoading()
						setTimeout(() => {
							// window.open(this.fileUrl)
							this.$pk.downLoadFile(this.fileUrl)
						})
					}

					this.isDetail = false
				})
				.catch(err => {
					console.log('err :>> ', err)
					setTimeout(() => {
						this.isTimeOut = true
						this.$hideLoading()
						this.$message.error('PDF generation failed, please contact administrator!')
					}, 10000)
				})
		},
		cancelCreatePdf(e) {
			console.log('e :>> ', e)
			if (this.isToDo) {
				this.$nextTick(() => {
					if (this.fileUrl) {
						this.pdfModalVisable = false
					}
					if (!this.fileUrl && !this.isTimeOut) {
						this.pdfModalVisable = true
					}
					if (!this.fileUrl && this.isTimeOut) {
						this.pdfModalVisable = false
					}
				})
			} else {
				this.pdfModalVisable = false
			}
		},
		getImgFile(e) {
			console.log('父组件获取的图片 :>> ', e)
			let fileList = e.fileList
			this.Images = []
			fileList.map(item => {
				this.Images.push(item.response.data.fileName)
			})
		},
		openAddCommentsModal() {
			this.ModalTitle = 'Add Comments'
			// 清空弹框参数
			this.Comments = ''
			this.Satisfaction = 1
			this.Video = ''
			this.$nextTick(() => {
				this.Images = []
			})
			this.modalVisiable = true
		},
		handleOk() {
			if (!this.Comments) {
				this.$message.warn('Please enter the Comments')
				return
			}
			this.addComment()
			this.modalVisiable = false
		},
		addComment() {
			const a = {
				method: 'ShpSchemeReply_Add',
				userId: window.userId || 1,
				sign: '1',
				currentPage: 1,
				limit: 20,
				language: window.language || 1,
				fieldList: '',
				datas: {
					SchemeId: this.SchemeId,
					UserId: this.UserInfo.NTID,
					Comments: this.Comments,
					Satisfaction: this.Satisfaction,
					Images: this.Images,
					Video: this.Video
				}
			}
			this.$post(a).then(result => {
				console.log('评论 :>> ', result)
				if (result.code === 0) {
					this.$message.success('Add Success!')
					this.getCommentList()
				}
			})
		},
		changePage(current, pageSize) {
			this.commentPage = current
			this.commentPageSize = pageSize
			this.getCommentList()
		},
		getCommentList() {
			const a = {
				method: 'ShpSchemeReply_Que',
				userId: window.userId || 1,
				sign: '1',
				currentPage: this.commentPage > 1 ? this.commentPage : 1,
				limit: this.commentPageSize,

				language: window.language || 1,
				fieldList: '',
				datas: {
					SchemeId: this.SchemeId,
					QueType: this.QueType //只查询有图片的， "QueType":"Video" 只查询有视频的。不填是查所有。
				}
			}
			this.$post(a).then(result => {
				console.log('评论 :>> ', result.data)
				this.userReviewsInfo = result.data ? result.data : {}
				this.commentCount = result.count
				if (this.userReviewsInfo.shpSchemeReplyInfo && this.userReviewsInfo.shpSchemeReplyInfo.length > 0) {
					this.userReviewsInfo.shpSchemeReplyInfo.map(item => {
						item.selectUrl = ''
						item.CreateTime = item.CreateTime ? item.CreateTime.replace('T', ' ').slice(0, 22) : ''
						if (item.Images) {
							try {
								let img = eval('(' + item.Images + ')')
								if (Array.isArray(img)) {
									item.Images = img
								} else {
									item.Images = []
								}
							} catch (error) {
								console.log('error :>> ', error)
								item.Images = []
							}
						} else {
							item.Images = []
						}
						console.log('item :>> ', item.Images)
						console.log(' this.userReviewsInfo.shpSchemeReplyInfo :>> ', this.userReviewsInfo.shpSchemeReplyInfo)
						return item
					})
				} else {
					this.commentCount = 0
					this.userReviewsInfo.shpSchemeReplyInfo = []
				}
			})
		},
		errorImg(event) {
			this.$pk.errorImg(event)
		},
		getSchemeId(e) {
			this.SchemeId = e
			this.getSchemeDetail()
		},
		giveLike() {
			const a = {
				method: 'ShpSchemePraise_Add',
				userId: window.userId || 1,
				sign: '1',
				currentPage: 1,
				limit: 0,
				language: window.language || 1,
				datas: {
					SchemeId: this.SchemeId
				}
			}
			this.$post(a).then(result => {
				console.log('result :>> ', result)
				this.getSchemeDetail()
			})
		},
		mock() {},

		toRecommend() {},
		tabClick(index) {
			this.activeIndex = index
		},
		RecommendSorting({ key }) {
			// console.log(`Click on item ${key}`)
		},
		handleScrollx() {
			let pageYOffset = Number(window.pageYOffset)
			// console.log('距离顶部高度', window)
			// console.log('滚动高度', pageYOffset)

			this.$nextTick(() => {
				if (pageYOffset >= 1190) {
					this.fixTop = true
				} else {
					this.fixTop = false
				}
			})
		},
		upTit() {
			this.trackULTop = this.trackULTop + 582
			if (this.trackULTop > 0) {
				this.trackULTop = -(this.schemeInfo.shpSchemeRecommend.length * 193.8) + 582
			}
		},
		downTit() {
			this.trackULTop = this.trackULTop - 582
			if (this.trackULTop < -(this.schemeInfo.shpSchemeRecommend.length * 193.8)) {
				this.trackULTop = 0
			}
			console.log('this.trackULTop :>> ', this.trackULTop)
		},
		shopImgPreview(e, v, i, index, List, arr) {
			this.$nextTick(() => {
				this.$set(this.userReviewsInfo.shpSchemeReplyInfo[index], 'selectUrl', v)
				this.$set(this.userReviewsInfo.shpSchemeReplyInfo[index], 'activeIndex', i)
				this.$set(this.userReviewsInfo.shpSchemeReplyInfo[index], 'isShowImg', true)
				console.log('arr :>> ', arr)
				console.log(e, v, i, List)
				this.userReviewsInfo.shpSchemeReplyInfo[index].Images.map((element, j) => {
					if (j === i) {
						let src = element
						element = {}
						element.activeIndex = i
						element.isShowImg = true
						console.log('element :>> ', element)
						return element
					}
				})
			})
			console.log('this.userReviewsInfo.shpSchemeReplyInfo[index] :>> ', this.userReviewsInfo.shpSchemeReplyInfo[index])
		},
		geHistory() {
			const a = {
				method: 'Platform_Que',
				userId: window.userId || 1,
				sign: '1',
				currentPage: 1,
				limit: 4,
				language: 1,
				fieldList: '',
				datas: {
					IsMyBrowserHistory: '1'
				}
			}
			this.$post(a).then(result => {
				this.browsingHistory = result.data
				this.browsingHistory.map(item => {
					item.SchemeImage = item.SchemeImage ? eval('(' + item.SchemeImage + ')') : []
					return item
				})
			})
		},
		changeReviews(num) {
			this.reviewsIndex = num
			if (num === 0) this.QueType = ''
			else if (num === 1) this.QueType = 'Pictured'
			else if (num === 2) this.QueType = 'Video'
			this.getCommentList()
		},
		toSchemePage(item) {
			// 本页面  无需跳页 loading即可
			this.$showLoading()
			console.log('item :>> ', item)
			this.SchemeId = item.SchemeId
			this.getSchemeDetail()
		},
		// 方案的详细信息
		getSchemeDetail() {
			const that = this
			const a = {
				method: 'ShpSchemeInfo_Que',
				userId: window.userId || 1,
				sign: '1',
				currentPage: 0,
				limit: 0,
				language: window.language || 1,
				datas: {
					SchemeId: this.SchemeId
				}
			}
			this.$post(a).then(result => {
				this.schemeInfo = result.data
				this.schemeInfoDetailList = Object.keys(this.schemeInfo)

				console.log('this.schemeInfoDetailList :>> ', this.schemeInfoDetailList)
				this.$hideLoading()
				console.log('this.schemeInfo :>> ', this.schemeInfo)
				this.schemeInfo.CreateTime = this.schemeInfo.CreateTime ? this.schemeInfo.CreateTime.replace('T', ' ').substr(0, 10) : ''
				this.schemeInfo.DueDate = this.schemeInfo.DueDate ? this.schemeInfo.DueDate.replace('T', ' ').substr(0, 10) : ''
				this.Summary = this.schemeInfo.Summary ? this.schemeInfo.Summary : ''
				this.imageArr = this.schemeInfo.SchemeImage ? eval('(' + this.schemeInfo.SchemeImage + ')') : []

				this.DetailedInformation = this.schemeInfo.Introduction ? this.schemeInfo.Introduction.split('\\').join('') : ''
				this.schemeInfo.shpSchemeRecommend.map(item => {
					item.SchemeImage = item.SchemeImage ? eval('(' + item.SchemeImage + ')') : []
					return item
				})
				this.schemeInfo.shpSchemeSME.map(item => {
					item.SchemeImage = item.SchemeImage ? eval('(' + item.SchemeImage + ')') : []
					return item
				})
				this.$nextTick(() => {
					that.totalAmount = 0
					if (this.schemeInfo.shpSchemeKind && this.schemeInfo.shpSchemeKind.length > 0) {
						this.schemeInfo.shpSchemeKind.map((item, index) => {
							item.sub_total = 0
							item.check = true
							this.sub_totalList[index] = 0
							if (item.shpSchemeDetailed && item.shpSchemeDetailed.length > 0) {
								item.shpSchemeDetailed.map((v, i) => {
									that.sub_totalList[index] += v.Price * v.Quantity
									v.check = true
									return v
								})
							}
							that.totalAmount = that.sub_totalList.reduce((x, y) => {
								return Number(x) + Number(y)
							})
							return item
						})
					}

					this.makeKindIdList()
				})
			})
		},
		onSelectChange(selectedRowKeys, selectedRows) {
			console.log('row', selectedRows, selectedRowKeys) //选中行的数据
			this.selectedRows = selectedRows
			this.sub_total = 0
			selectedRows.map(item => {
				this.sub_total += item.Price * item.Quantity
			})
		},
		// table点击当前行
		rowClick(row) {
			// console.log(text, record)
		},
		onChangeQuantity(text, index) {
			const that = this
			let i = Number(index)
			console.log(text, 'text', index, 'index')
			this.$nextTick(() => {
				that.schemeInfo.shpSchemeKind[i].sub_total = 0
				that.sub_totalList[i] = 0
				console.log(that.schemeInfo.shpSchemeKind[i].shpSchemeDetailed)
				that.schemeInfo.shpSchemeKind[i].shpSchemeDetailed.map((v, j) => {
					if (v.check == true) {
						that.schemeInfo.shpSchemeKind[i].sub_total += v.Price * v.Quantity
						that.sub_totalList[i] += v.Price * v.Quantity
						this.$forceUpdate()
					}
				})
				console.log('v :>> ', that.sub_totalList[i])
				that.totalAmount = that.sub_totalList.reduce((x, y) => {
					return Number(x) + Number(y)
				})
			})

			// this.reMathInfo()
		},

		setRowClassName(row) {}
	}
}
</script>
<style lang="less" scoped>
@import url('css/Scheme.less');
</style>
